<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    {include file="common/css"}
</head>
<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">卡片标题</label>
                    <div class="layui-input-inline">
                        <input type="text" name="realName" id="realName" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">卡片名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" id="realName" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="data-search-btn"><i class="layui-icon"></i>
                        搜 索</button>
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="data-btn"><i class="layui-icon"></i>
                        获取数据</button>
                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="data-checked-btn"><i class="layui-icon"></i>
                        获取选中数据</button>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            
            <div id="currentTableId"><div class="cloud-card-component"><div class="layui-row layui-col-space30"><div id="1" onclick="cardTableCheckedCard(currentTableId,this)" class="layui-col-md3 ew-datagrid-item" data-index="0" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png"> <div class="project-list-item-body"> <h2>Alipay</h2> <div class="project-list-item-text layui-text">那是一种内在的东西， 他们到达不了，也无法触及的</div> <div class="project-list-item-desc"> <span class="time">几秒前</span> <div class="ew-head-list"></div> </div> </div> </div> </div> <div id="2" onclick="cardTableCheckedCard(currentTableId,this)" class="layui-col-md3 ew-datagrid-item layui-table-click" data-index="1" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png"> <div class="project-list-item-body"> <h2>Layui</h2> <div class="project-list-item-text layui-text">生命就像一盒巧克力，结果往往出人意料</div> <div class="project-list-item-desc"> <span class="time">几秒前</span> <div class="ew-head-list"></div> </div> </div> </div> </div> <div id="3" onclick="cardTableCheckedCard(currentTableId,this)" class="layui-col-md3 ew-datagrid-item" data-index="2" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"> <div class="project-list-item-body"> <h2>Angular</h2> <div class="project-list-item-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div> <div class="project-list-item-desc"> <span class="time">几秒前</span> <div class="ew-head-list"></div> </div> </div> </div> </div> <div id="4" onclick="cardTableCheckedCard(currentTableId,this)" class="layui-col-md3 ew-datagrid-item" data-index="3" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png"> <div class="project-list-item-body"> <h2>React</h2> <div class="project-list-item-text layui-text">那是一种内在的东西， 他们到达不了，也无法触及的</div> <div class="project-list-item-desc"> <span class="time">几秒前</span> <div class="ew-head-list"></div> </div> </div> </div> </div> <div id="5" onclick="cardTableCheckedCard(currentTableId,this)" class="layui-col-md3 ew-datagrid-item" data-index="4" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png"> <div class="project-list-item-body"> <h2>Alipay</h2> <div class="project-list-item-text layui-text">那是一种内在的东西， 他们到达不了，也无法触及的</div> <div class="project-list-item-desc"> <span class="time">几秒前</span> <div class="ew-head-list"></div> </div> </div> </div> </div> <div id="6" onclick="cardTableCheckedCard(currentTableId,this)" class="layui-col-md3 ew-datagrid-item" data-index="5" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png"> <div class="project-list-item-body"> <h2>Layui</h2> <div class="project-list-item-text layui-text">生命就像一盒巧克力，结果往往出人意料</div> <div class="project-list-item-desc"> <span class="time">几秒前</span> <div class="ew-head-list"></div> </div> </div> </div> </div> <div id="7" onclick="cardTableCheckedCard(currentTableId,this)" class="layui-col-md3 ew-datagrid-item" data-index="6" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"> <div class="project-list-item-body"> <h2>Angular</h2> <div class="project-list-item-text layui-text">希望是一个好东西，也许是最好的，好东西是不会消亡的</div> <div class="project-list-item-desc"> <span class="time">几秒前</span> <div class="ew-head-list"></div> </div> </div> </div> </div> <div id="8" onclick="cardTableCheckedCard(currentTableId,this)" class="layui-col-md3 ew-datagrid-item" data-index="7" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png"> <div class="project-list-item-body"> <h2>React</h2> <div class="project-list-item-text layui-text">那是一种内在的东西， 他们到达不了，也无法触及的</div> <div class="project-list-item-desc"> <span class="time">几秒前</span> <div class="ew-head-list"></div> </div> </div> </div> </div> </div></div><div id="cardpage"><div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-3"><span class="layui-laypage-count">共 8 条</span><a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span><a href="javascript:;" class="layui-laypage-next layui-disabled" data-page="2">下一页</a><span class="layui-laypage-limits"><select lay-ignore=""><option value="8" selected="">8 条/页</option></select></span><span class="layui-laypage-skip">到第<input type="text" min="1" value="1" class="layui-input">页<button type="button" class="layui-laypage-btn">确定</button></span></div></div></div>
        </div>
    </div>
    {include file="common/js"}
    <script>
        layui.use(['table', 'layer', 'form', 'jquery', 'card'], function() {

            let table = layui.table;
            let form = layui.form;
            let $ = layui.jquery;
            let layer = layui.layer;
            let card = layui.card;

            card.render({
                elem: '#currentTableId',
                url: '/static/admin/data/card.json', // 接口数据
                data: [], // 静态数据 
                page: true, // 是否分页
                limit: 8, // 每页数量
                linenum: 4, // 每行数量
                clickItem: function(data){ // 单击事件
                    console.log(data)
                }
            })
            
            // 监听搜索操作
            form.on('submit(data-search-btn)', function(data) {
                queryJson = data.field;
                card.reload("currentTableId", {
                    where: queryJson,
                });
                return false;
            });
            form.on('submit(data-checked-btn)', function() {
                var data = card.getChecked("currentTableId");
                layer.msg(JSON.stringify(data));
                return false;
            });
            form.on('submit(data-btn)', function() {
                var data = card.getAllData("currentTableId");
                layer.msg(JSON.stringify(data));
                return false;
            });
        })
    </script>


<div class="layui-layer-move" id="layui-layer-move"></div></body>